<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <div>
          <div>
            <el-input
              v-model="select.orderNo"
              style="width:250px;"
              placeholder="请输入订单号"
              class="handle-input mr10"
            ></el-input>
            <el-input
              v-model="select.buyerName"
              style="width:150px;"
              placeholder="请输入订购人"
              class="handle-input mr10"
            ></el-input>
            <el-select v-model="select.status" placeholder="审核状态">
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div style="margin-top:20px;display:flex;">
            <el-date-picker
              style="flex:1"
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
           <el-input
              v-model="select.storageOutApplyId"
              style="width:300px;margin-left:10px"
              placeholder="请输入出仓单号"
              class="input-with-select"
              :disabled="!select.applyStorageOut"
            >
              <el-select
                v-model="select.applyStorageOut"
                slot="prepend"
                placeholder="请选择"
                style="width:100px"
              >
                <el-option label="已出仓" :value=true></el-option>
                <el-option label="未出仓" :value=false></el-option>
                <el-option label="全部" value></el-option>
              </el-select>
            </el-input>
            <div style="flex:1;text-align: center;line-height:32px;">
              日期排序:
              <el-switch v-model="orderByCreateDate" active-text="升序" inactive-text="降序"></el-switch>
            </div>
          </div>
        </div>
        <div style="display: flex;justify-content: center;align-items: center;flex:1; ">
          <div>
            <el-button type="primary" @click="searchData" style="float:right">搜索</el-button>
          </div>
        </div>
      </div>
      <el-table :data="data" v-loading.body="listLoading" class="table" style="width:100%">
        <el-table-column prop="createDate" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="ebPlatform.name" label="渠道" width="120"></el-table-column>
        <el-table-column prop="tradeInfo.orderNo" label="渠道订单号" width="200"></el-table-column>
        <el-table-column prop="status" label="状态" width="150" :formatter="formatStatus"></el-table-column>
        <el-table-column label="物流单号" width="230">
          <template
            v-if="scope.row.declarationInfo.logisticsOrg && scope.row.logisticsOrder"
            slot-scope="scope"
          >{{scope.row.declarationInfo.logisticsOrg.name}} | {{scope.row.logisticsOrder.logisticsNo }}</template>
        </el-table-column>
          <el-table-column prop="applyStorageOut" label="出仓单号" width="150">
          <template
            slot-scope="scope"
          >{{scope.row.applyStorageOut?scope.row.storageOutApplyId:'未出仓'}}</template>
        </el-table-column>
        <el-table-column prop="buyerInfo.buyerName" label="订购人" width="100"></el-table-column>
        <el-table-column prop="buyerInfo.buyerTel" label="订购人手机号" width="120"></el-table-column>
        <el-table-column prop="logisticsOrder.consignee" label="收件人" width="100"></el-table-column>
        <el-table-column prop="logisticsOrder.consigneeTel" label="收件人手机号" width="120"></el-table-column>
        <!-- <el-table-column label="操作" align="center" prop="id">
          <template slot-scope="scope" style="display:flex">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            <el-button
              type="text"
              @click="handleGenerate(scope.$index, scope.row)"
              style="margin:0 20px;"
            >生成</el-button>
            <el-popover width="200" trigger="hover">
              <div>
                <el-button
                  type="text"
                  slot="reference"
                  @click="handleReportWX(scope.$index, scope.row)"
                >无锡公服</el-button>
                <el-button
                  type="text"
                  slot="reference"
                  @click="handleReportJGT(scope.$index, scope.row)"
                >金匮通通道</el-button>
              </div>
              <el-button type="text" slot="reference">上报</el-button>
            </el-popover>
            <el-button
              type="text"
              @click="setLogistics(scope.$index, scope.row)"
              style="margin-left:20px"
            >设置运单</el-button>
            <el-button
              type="text"
              style="margin:0 20px;"
              @click="handleApply(scope.$index, scope.row)"
            >一键申报</el-button>
            <el-button type="text" @click="handleConfirm(scope.$index, scope.row)">确认结果</el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <!-- <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
                </el-pagination>
      </div>-->
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.pageNo"
          :page-sizes="[5,10,20,30, 50]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <!-- <orderDetail
      v-if="editVisible"
      :companylist="companylist"
      :showdetail="editVisible"
      :ebPlatformlist="ebPlatformlist"
      :selectId="selectId"
      @closeDialog="handleclose"
      @reloadData="handleclosedata"
    ></orderDetail>-->

    <!-- <el-dialog title="设置运单" :visible.sync="setloginfo">
      <el-form :model="setlog" label-width="80px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="运单号">
              <el-input v-model="setlog.logisticsNo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="运输企业">
          <el-select
            v-model="setlog.deliverLogisticsOrgId"
            placeholder="请选择运输企业"
            style="width:100%"
          >
            <el-option
              v-for="item in companylist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setloginfo = false">取 消</el-button>
        <el-button type="primary" @click="colseSetloginfo">确 定</el-button>
      </div>
    </el-dialog>-->
  </div>
</template>

<script>
import { QueryOrg, QueryEbPlatform } from "@/api/company";
import orderDetail from "./detail.vue";
import {
  QueryOrder
  //   ReportWX,
  //   ReportJGT,
  //   GenerateOrder,
  //   ApplyOrder,
  //   ConformResult,
  //   SettingLogistics
} from "@/api/goods";
export default {
  name: "basetable",
  components: {
    orderDetail
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      del_list: [],
      editVisible: false,
      value1: [], //时间
      orderByCreateDate: false,
      select: {
        buyerName: "",
        orderNo: "",
        status: "",
        orgId: "",
        storageOutApplyId:'',
        betweenCreateDates: [],
        applyStorageOut:false
      },
      status: [
        { label: "全部", value: "" },
        { label: "暂存", value: "temp" },
        { label: "准备完毕", value: "ready" },
        { label: "公服处理中", value: "wait" },
        { label: "上报成功", value: "ok" },
        { label: "有问题被拒", value: "problem" },
        { label: "取消", value: "cancel" }
      ],
      companylist: [],
      form: {},
      total: 0,
      listLoading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      selectId: "",
      ebPlatformlist: [],
      setloginfo: false,
      setlog: {
        ebOrderId: "",
        logisticsNo: "",
        deliverLogisticsOrgId: ""
      }
    };
  },
  created() {
    this.getData();
    QueryOrg({ resultType: "list" }).then(res => {
      this.companylist = res.data.map(item => {
        return { label: item.name, value: item.id };
      });
    });

    QueryEbPlatform({ resultType: "list" }).then(res => {
      this.ebPlatformlist = res.data.map(item => {
        return { label: item.name, value: item.id };
      });
    });
  },
  computed: {
    data() {
      return this.tableData.filter(d => {
        return d;
      });
    }
  },
  methods: {
    formatStatus(row) {
      return this.switchstatus(row);
    },
    switchstatus(row) {
      switch (row.status) {
        case "temp":
          return "暂存";
          break;
        case "ready":
          return "准备完毕";
          break;
        case "wait":
          return "公服处理中";
          break;
        case "ok":
          return "上报成功";
          break;
        case "problem":
          return "有问题被拒";
          break;
        case "cancel":
          return "取消";
          break;
        default:
          return "异常";
          break;
      }
    },
    // 分页导航
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getData(this.select);
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val;
      this.getData(this.select);
    },
    getData(data) {
      var arg = Object.assign(this.listQuery, {
        resultType: "pagination",
        // fetchOrderItems: true,
        fetchOrg: true,
        ebOrderItemViewQO: {
          fetchRegisterGoodsInfo: true
        },
        fetchLogisticsOrder: true,
        fetchEbPlatform: true,
        orderByCreateDate: "-1"
      });
      if (data) {
        arg.buyerName = this.select.buyerName;
        arg.buyerNameLike = true;
        arg.orderNoLike = true;
        //日期筛选
        if (typeof this.value1 == "object") {
          if (this.value1 == null) {
            delete arg.betweenCreateDates;
          } else {
            if (this.value1.length > 1) {
              arg.betweenCreateDates = this.timeformat(this.value1);
            }
          }
        } else {
          delete arg.betweenCreateDates;
        }

        arg.orderByCreateDate = this.orderByCreateDate ? "1" : "-1";
        // arg.orgId = this.select.orgId;
        arg.orderNo = this.select.orderNo;
        arg.status = this.select.status;
        arg.applyStorageOut = this.select.applyStorageOut;
        
        if (arg.applyStorageOut) {
          arg.storageOutApplyId = this.select.storageOutApplyId;
        } else {
          if (!arg.applyStorageOut && typeof arg.applyStorageOut!="boolean") {
          delete arg.applyStorageOut;
        }
          if (arg.hasOwnProperty("storageOutApplyId")) {
            delete arg.storageOutApplyId;
          }
        }
      } else {
        delete arg.buyerNameLike;
        delete arg.orderNoLike;
      }
      // this.listLoading=true;
      this.tableData = [];
      console.log(arg);
      QueryOrder(arg).then(res => {
        this.tableData = res.data.list;
        //    .map(item=>{
        //        return item.checkout= item.checkStatus==='ok'?false:true;
        //    })
        this.listLoading = false;
        this.total = res.data.totalCount;
      });
    },
    searchData() {
      //带参数查询
      console.log(this.select);
      this.listQuery.pageNo = 1;
      this.getData(this.select);
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    handleclose() {
      this.editVisible = false;
    },
    handleclosedata() {
      this.editVisible = false;
      this.getData();
    },
    timeformat(a) {
      var arr = [a[0], a[1]];
      arr[0] = arr[0].toJSON().replace(".000Z", "");
      arr[1] = arr[1].toJSON().replace(".000Z", "");
      return arr;
    }
    // handleEdit(index, row) {
    //   this.editVisible = true;
    //   this.selectId = row.tradeInfo.orderNo;
    //   this.form = row;
    // },
    // handleGenerate(index, row) {
    //   var arr = [];
    //   arr.push(row.id);
    //   GenerateOrder({
    //     ebOrderIds: arr
    //   }).then(res => {
    //     if (res.code == "0") {
    //       this.$message.success("操作成功");
    //     } else {
    //       this.$message.error(res.msg);
    //     }
    //   });
    // },
    // handleReportWX(index, row) {
    //   var arr = [];
    //   arr.push(row.id);
    //   ReportWX({
    //     ebOrderIds: arr
    //   }).then(res => {
    //     if (res.code == "0") {
    //       this.$message.success("操作成功");
    //     } else {
    //       this.$message.error(res.msg);
    //     }
    //   });
    // },
    // handleReportJGT(index, row) {
    //   var arr = [];
    //   arr.push(row.id);
    //   ReportJGT({
    //     ebOrderIds: arr
    //   }).then(res => {
    //     if (res.code == "0") {
    //       this.$message.success("操作成功");
    //     } else {
    //       this.$message.error(res.msg);
    //     }
    //   });
    // },
    // handleApply(index, row) {
    //   ApplyOrder({
    //     ebOrderId: row.id
    //   }).then(res => {
    //     if (res.code == "0") {
    //       this.$message.success("操作成功");
    //     } else {
    //       this.$message.error(res.msg);
    //     }
    //   });
    // },
    // handleConfirm(index, row) {
    //   //ConformResult
    //   this.$confirm("订单确认结果", "提示", {
    //     confirmButtonText: "成功",
    //     cancelButtonText: "取消",
    //     distinguishCancelAndClose: true,
    //     type: "warning"
    //   })
    //     .then(() => {
    //       ConformResult({
    //         ebOrderId: row.id,
    //         result: "ok"
    //       }).then(res => {
    //         if (res.code == "0") {
    //           this.$message.success("确认成功");
    //           this.getData();
    //         } else {
    //           this.$message.error(res.msg);
    //         }
    //       });
    //     })
    //     .catch(action => {
    //       if (action === "cancel") {
    //         ConformResult({
    //           ebOrderId: row.id,
    //           result: "cancel"
    //         }).then(res => {
    //           if (res.code == "0") {
    //             this.$message.success("取消成功");
    //             this.getData();
    //           } else {
    //             this.$message.error(res.msg);
    //           }
    //         });
    //       }
    //     });
    // },
    // async setLogistics(index, row) {
    //   var arg = {
    //     resultType: "unique",
    //     fetchOrg: true,
    //     orderNo: row.tradeInfo.orderNo,
    //     fetchLogisticsOrder: true,
    //     fetchOrderItems: true
    //   };

    //   await QueryOrder(arg).then(res => {
    //     var data = res.data;
    //     this.setlog = {
    //       ebOrderId: data.id,
    //       logisticsNo:
    //         "logisticsOrder" in data ? data.logisticsOrder.logisticsNo : "",
    //       deliverLogisticsOrgId:
    //         "logisticsOrder" in data &&
    //         "deliverLogisticsOrg" in data.logisticsOrder
    //           ? data.logisticsOrder.deliverLogisticsOrg.id
    //           : ""
    //     };
    //   });
    //   this.setloginfo = true;
    // }, // 保存编辑
    // colseSetloginfo() {
    //   SettingLogistics(this.setlog).then(res => {
    //     if (res.code == "0") {
    //       this.$message.success("操作成功");
    //       this.setloginfo = false;
    //     } else {
    //       this.$message.error(res.msg);
    //     }
    //   });
    // },
    // async saveEditform(status) {
    //   // this.$set(this.tableData, this.idx, this.form);
    //   this.editVisible = false;

    //   await CheckDeclaration({
    //     ebRegisterGoodsId: this.form.id,
    //     approve: status, //  是否通过
    //     remark: this.form.remark
    //   }).then(res => {
    //     if (res.code == "0") {
    //       this.$message.success("操作成功");
    //     } else {
    //       this.$message.error(res.msg);
    //     }
    //   });
    //   await this.getData();
    // }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
  display: flex;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
</style>
